<template>
    <el-row :gutter="24">
        <el-col :span="4">
            <Navgation></Navgation>
        </el-col>
        <el-col :span="20" >
            <TopMenu></TopMenu>
        </el-col>

        <!--面包屑-->
        <el-col :span="20" :offset="4" >
            <div class="breadcrumbContainer">
                <el-breadcrumb separator=" | " class="myBreadcrumb" >
                    <el-breadcrumb-item v-for="item in breadcrumbList" :key=item.label :to="{ path: item.to }" class="myBreadcrumbStyle">{{item.label}}</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
        </el-col>

<!--        工作区-->
        <el-col :span="20" :offset="4" class="mainContainer">
            <el-row :gutter="24">
                <el-col :span="4" class="toolsBox">
                    工具区
                </el-col>

                <el-col :span="16" class="workspace">
                    主要工作区
                </el-col>

                <el-col :span="4" class="getInfoArea">
                    <el-col :span="24" class="infoItemStyle">
                        信息加工区
                    </el-col>
                    <el-col :span="24" class="infoItemStyle">
                        对象
                    </el-col>
                </el-col>

            </el-row>


        </el-col>

    </el-row>

</template>

<script>
import Navgation from "@/components/navigation";
import TopMenu from "@/components/topMenu";
export default {
    name: "Home",
    data: function (){
        return{
            title:"home",
            hello:"hello world",

            // 面包屑的列表
            breadcrumbList:[
                {
                    "label":"首页",
                    "to":"/",
                },
                {
                    "label":"主页",
                    "to":"/home",
                },
                {
                    "label":"德州",
                    "to":"/de",
                },

            ]

        }
    },
    methods:{

    },
    components:{
        Navgation,
        TopMenu,
    }
}
</script>

<style scoped>
.el-col {
    margin: 0px !important;
    padding: 0px !important;

}

.el-row {
    margin: 0px !important;
    padding: 0px !important;
}

.breadcrumbContainer{

}
.mainContainer{
    text-align: center;
    text-align-all: center;
}

.myBreadcrumb{
    height: 40px;
    font-size: 18px;
    background: #73b9a2;
    color: black;

}

.myBreadcrumbStyle{
    position: relative;
    margin-top: 10px;
}

.toolsBox{
    background-color: #42b983;
    width: 20%;
    height: 100vh;
}
.workspace{
    background-color: antiquewhite;
    width: 60%;
    height: 100vh;
}
.getInfoArea{
    width: 20%;
}
.infoItemStyle{
    width: 100%;
    height: 50vh;
    background-color: #42b983;

}

</style>

